<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1" >

    <input type="text" v-model="msg">
   <div>{{msg | upper1}}</div>
   <div>{{msg | lower1}}</div>
   <div>{{msg | lower2}}</div>
    <div :arr1='msg | upper1'>过滤器绑定到属性</div>
</div>
<script>

    Vue.filter('lower2', function (value) {     //全局的过滤器
        return value.toLowerCase();
    });

    const vueObj = new Vue({
        el: '#div1',
        data: {
            msg: 'default',

        },
        filters: {
            upper1: function (value) {
                // console.log(value);
                return value.toUpperCase();

            },
            lower1: function (value) {
                // console.log(value);
                return value.toLowerCase();

            },
        },




    });



</script>
</body>
</html>